*{
  margin: 0 auto;
  padding: 0;
}
body{
  text-align: center;
}
nav{
  width: 100%;
  height: 60px;
}
.nav{
  display: flex;
}
.nav-left{
  width:50% ;
  height: 60px;
}
.nav-right{
  width:40% ;
  height: 60px;
}
.nav-left>ul,nav-right>ul{
  list-style: none;
}
.nav-left>ul>li,.nav-right>ul>li{
  display: block;
  float: left;
  width: 70px;
  height: 60px;
  line-height: 60px;
}
.nav-left>ul>li>a,.nav-right>ul>li>a{
  color: #333;
  font-weight: bold;
  text-decoration: none;
}
.nav-left>ul>li>a:hover,.nav-right>ul>li>a:hover,.nav2>li>a:hover{
  color: skyblue;
}
.bg-1{
  width: 30px;
  height: 30px;
  margin-top: 20px;
  display: inline-block;
  margin-right: 0px;
  background: url(../imgl/download-1.png) no-repeat -444px -547px ;
}
.bg-2{
  width: 30px;
  height: 30px;
  margin-top: 20px;
  display: inline-block;
  margin-right: 0px;
  background: url(../imgl/download-1.png) no-repeat -206px -80px ;
}
.nav2{
  width: 200px;
  list-style: none; 
   display: none;
}
.nav2>li{
  float: left;
  width: 50%;
  height: 50px;
}
.nav2>li>a{
  display: block;
  background-color: white;
  color: #333;
  text-decoration: none;
}
.active{
  display: block;
}
ul>li>input{
  width: 80px;
  height: 40px;
  background-color: skyblue;
  border: none;
  margin-top: 10px;
  border-radius: 10px;
  display: block;
  line-height: 40px;
  color: white;
  cursor: pointer;
}
ul>li>input:hover{
  background-color: rgb(32, 175, 231);
}
section{
  width: 100%;
  height: 600px;
  background: url(../imgl/back.png);
}
.section{
  display: flex;
}
.section-left{
  width: 35%;
  height: 500px;
  margin-top: 80px;
}
.section-right{
  width: 65%;
  height: 500px;
  margin-top: 30px;
  position: relative;
}
.logo>img{
  width: 139px;
  height: 54px;
  margin-left: -150px;
}
.text{
  width: 100%;
  height: 100px;
  color: white;
  font-size: 30px;
  margin: 20px 0px 0px -10px;
}
.section-left>ul{
  list-style: none;
  margin-left: -100px;
}
.section-left>ul>li{
  width: 35%;
  height: 60px;
  line-height: 55px;
  display: block;
  border: 2px solid rgb(250, 250, 250);
  background-color: #333;
  border-radius:10px;;
  margin-bottom: 40px;
  color: white;
  display: flex;
}
.section-left>ul>li:hover{
  background-color: white;
  color: #333;
}
.bgq1{
  width: 30%;
  height: 45px;
  display: inline-block;
  background: url(../imgl/icon.png) no-repeat -66px -190px;
  margin: 0px 10px 0px -10px;
}
.bgq2{
  width: 30%;
  height: 45px;
  display: inline-block;
  background: url(../imgl/icon.png) no-repeat -66px -262px;
  margin: 0px 10px 0px -10px;
}
footer{
  width: 100%;
  height: 150px;
  background-color: rgb(70, 74, 80);
  margin-top: -10px;
}
.top{
  margin-left: 100px;
}
.top>ul,.bottom-left>ul{
  list-style: none;
}
.top>ul>li{
  width: 100px;
  float: left;
  margin-top: 60px;
}
.top>ul>li>a,.bottom-left>ul>li>a,.bottom-left>ul>li{
  color: #999;
  text-decoration: none;
}
.top>ul>li>a:hover,.bottom-left>ul>li>a:hover{
  color: rgb(138, 158, 182);
}
.img1,.img2{
  width: 150px;
  height: 150px;
  position: absolute;
  top: 320px;
  left: 400px;
  display: none;
}
#cord>div>div{
  display: none;
}
#cord>div>div.active{
  display: block;
}
#cord>div>div>img{
  margin-left: -530px;
  margin-top: 50px;
}
button{
  border: none;
}
.b1{
  width: 50px;
  height: 50px;
  display: inline-block;
  background: url(../imgl/icon.png) no-repeat -80px -134px;
  position: absolute;
  top: 330px;
  right: 400px;
}
.b2{
  width: 50px;
  height: 50px;
  display: inline-block;
  background: url(../imgl/icon.png) no-repeat -80px -13px;
  position: absolute;
  top: 330px;
}
.b3{
  width: 50px;
  height: 50px;
  display: inline-block;
  background: url(../imgl/icon.png) no-repeat -80px -73px;
  position: absolute;
  top: 330px;
  right: 240px;
}
h2{
  color:orange;
  margin-top: -250px;
  margin-left: -10px;
}
h3{
  color: white;
  text-align: left;
  margin-left: 230px;
}
.bottom{
  width: 1300px;
  display: flex;
}
.bottom-left{
  width: 1000px;
  margin-top: 20px;
}
.bottom-left>ul>li{
  float: left;
}